<template>
  <view>
    <div>
      <u-navbar leftText="返回" title="站长首页" :safeAreaInsetTop="true">
        <template #left>
          <view class="u-nav-slot" @click="show = true">
            <div>
              <u-icon name="map-fill" size="18"></u-icon>
            </div>
            <div style="display: flex">
              <div class="title">深圳***食堂</div>
              <div style="margin-top: 4rpx">
                <u-icon name="arrow-down" size="16"></u-icon>
              </div>
            </div>
          </view>
        </template>
      </u-navbar>
    </div>
    <div class="big-box">
      <div class="box1" @click="tourl('/pages/delivery/index')">
        分配配送任务
      </div>
      <div class="box2" @click="tourl1('/pages/longinsucc/index')">
        <div class="title1">选择职位</div>
        <div>
          <image
            src="https://yong-shan-tuan.oss-cn-hangzhou.aliyuncs.com/f028644f-a521-410b-874c-2782752e31f0.png"
            mode="scaleToFill"
            style="width: 44rpx; height: 44rpx" />
        </div>
      </div>
    </div>
    <div class="msg-box">
      <div class="box4">
        <div style="display: flex; justify-content: space-around; width: 40%">
          <div class="title5" style="background-color: aqua">休假中</div>
          <div class="title5">工作中</div>
        </div>
        <div style="display: flex; justify-content: space-around; width: 30%">
          <div class="font" @click="tourl('/pages/delivery/index')">编辑</div>
          <div class="font">删除</div>
        </div>
      </div>
      <div class="from-box">
        <div class="from-item" v-for="item in from">
          <div style="text-align: left">
            <text class="title3">{{ item.title1 }}</text>
            <text class="title7">李aaa</text>
          </div>
          <div style="display: flex; text-align: left">
            <div class="title3">{{ item.title2 }}</div>
            <div class="title7">李aaa</div>
          </div>
        </div>
      </div>
    </div>

    <u-picker
      :show="show"
      :columns="columns"
      @confirm="confirm"
      @cancel="cancel"
      @close="close"
      :closeOnClickOverlay="true"></u-picker>
    <Tabbar></Tabbar>
  </view>
</template>
<script setup>
import Tabbar from '@/components/tabbar/index.vue'
const show = ref(false)
const columns = reactive([['中国', '美国', '日本']])
const from = ref([
  {
    title1: '配送员：',
    title2: '地址：'
  },
  {
    title1: '手机号：',
    title2: '送达时间：'
  },
  {
    title1: '取餐：',
    title2: '守摊人：'
  },
  {
    title1: '配送点：',
    title2: '取餐时间：'
  }
])
// 确认地址
const confirm = () => {
  show.value = false
}
// 取消操作
const cancel = () => {
  show.value = false
}
// 关闭操作
const close = () => {
  show.value = false
}
const tourl = (url) => {
  uni.navigateTo({
    url
  })
}
const tourl1 = (url) => {
  uni.redirectTo({
    url
  })
}
</script>
<style>
.u-nav-slot {
  display: flex;
}

.title {
  height: 40rpx;
  color: black;
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
  margin: 0rpx 10rpx;
}

.box1 {
  width: 220rpx;
  height: 72rpx;
  border-radius: 36rpx;
  background: rgba(255, 99, 6, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
}

.big-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0rpx 20rpx;
  margin-top: 30rpx;
}

.u-navbar--fixed.data-v-9d9e7ee2 {
  position: static !important;
}

.box2 {
  width: 220rpx;
  height: 72rpx;
  border-radius: 36rpx;
  background: rgba(255, 99, 6, 1);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10rpx 20rpx;
}

.title1 {
  color: rgba(255, 255, 255, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
}

.msg-box {
  width: 690rpx;
  height: 332rpx;
  border-radius: 20rpx;
  background: white;
  margin: 40rpx auto;
}

.box4 {
  width: 690rpx;
  height: 72rpx;
  border-radius: 20rpx 20rpx 0rpx 0rpx;
  background: rgba(255, 99, 6, 1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title5 {
  width: 112rpx;
  height: 52rpx;
  border-radius: 26rpx;
  background: rgba(221, 221, 221, 1);
  color: rgba(153, 153, 153, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.font {
  color: rgba(255, 255, 255, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
}

.from-item {
  display: flex;
  justify-content: space-between;
  margin: 20rpx 0 0;
}

.from-box {
  padding: 0rpx 40rpx;
  margin: 20rpx 0rpx 0rpx;
}

.title3 {
  color: rgba(102, 102, 102, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 24rpx;
}

.title7 {
  color: rgba(0, 0, 0, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
}

page {
  background: rgba(246, 246, 246, 1);
}
</style>
